Vue.component("myTableColumn", {
    props: ["prop", "label"],
    template: `<span />`,
    mounted() {
      this.$parent.column.push(this);
    },
  });

Vue.component("myTable3", {
data() {
    return {
    column: [
        //{label: '编号', prop: 'id'}
    ],
    };
},
props: {
    data: {
    type: Array,
    default: [],
    },
},
template: `<table border="1" cellpadding="10" cellspacing="0">
    <thead>
    <tr>
        <th v-for="item in column">{{item.label}}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="row in data">
    <td v-for="(col, index) in column">
        {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
    </td>
    </tr>

    <slot></slot>
    </tbody>
</table>`,
});


Vue.component('qfTips',{
    props:{
        state:{
            type:Boolean,
            default:false,
        }
        // content:{
        //     type:String,
        //     required:true,
        // }
    },
    
    template:`<div class="qf-tips" v-if="state">
        <slot></slot>   
    </div>`
})
Vue.component('qfTable2',{
    props:{
       columns:{
           type:Array,
           required:true,
       },
       data:{
        type:Array,
        required:true,
       }
    },
    template:`<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th v-for="thItem in columns">{{thItem.title}}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="trItem in data">
            <!-- <td>{{trItem.id}}</td>
            <td>{{trItem.title}}</td>
            <td>{{trItem.price}}</td>
            -->
            <td v-for="tdItem in columns">
            <!--  {{trItem.tdItem.key}}  -->
            {{trItem[tdItem.key]}}
            </td>

        </tr>
    </tbody>
</table>`
})



Vue.component('qfPage',{
    props:{
        total:{
            type:Number,
            default:0,
        },
        pageSize:{
            type:Number,
            default:2,
        }
    },
    data(){
        return{totalPage:0}
    }, 
    watch:{
        total:{
            handler(newdata){
                this.totalPage=Math.ceil(this.total/this.pageSize)
        },
        //首次触发
        immediate:true,
        }
    },

    template:`<div class="qf-page">
    <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
</div>`
})


Vue.component('qfDialog',{
    props:{
        title:{
            type:String,
            default:'默认标题',

        },
        // content:String,
        visible:{
            type:Boolean,
            default:false,

        }
    },

    template:`<div class="qf-dialog" v-if="visible">
    <div class="box">
        <div class="header">{{title}}</div>
        <div class="main">
        <slot></slot>
        </div>
        <div class="footer">

            <button @click="$emit('update:visible',false)">取消</button>
            <button>确定</button>
        </div>
    </div>
    </div>
    `
})

Vue.component('qfLoading2',{
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="qf-loading2"  v-if="state" @click="$emit('update:state',false)">
    <span>loading...</span>
    
    </div>
    `
})

Vue.component('qfLoading1',{
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="qf-loading1" v-if="state">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>`,
})

Vue.component('qfButton',{
    props:{ 
        content:{
            type:String,
            required:true,
        },
        type:{
            type:String,
            default:'primary',
        }
    },
    template:`<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']  ">
    <div class="qf-button__content">
    <span class="qf-button__text">{{content}}</span>
    </div>
</button>` 
})
Vue.component('qfNavBar',{
    props:{
        title:{
            type:String,
            required:true,
        },
        leftArrow:Boolean,
    },
    template:`<div class="qf-nav-bar">
        <span @click="$emit('click-left')">
        {{leftArrow?'<返回':''}}
        </span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">搜索</span>
    </div>
    `
})

Vue.component('qfTable',{
    props:{
        state:{
            type:Boolean,
            default:true,
        }
    },
    data(){
        return{
            // account:'',
            // password:'',
            formData:{
                account:'',
                password:'',
            }
        }
    },
    template:`<fieldset>
    <legend>千峰封装表单</legend>
    <!--
    用户名：<input type="text" v-model="account">
    密码：<input type="password" v-model="password">
    <button @click="$emit('submit',account,password)">提交</button>
    -->
    用户名：<input type="text" v-model="formData.account">
    密码：<input type="password" v-model="formData.password">
    <button v-if="state" @click="$emit('submit',formData)">提交</button>
</fieldset>`
})
